import './index.css';

import { Button, Modal } from 'antd';
import { degrees, PDFDocument, rgb } from 'pdf-lib';
import { useEffect, useState } from 'react';
import fontkit from '@pdf-lib/fontkit';

import font from './Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf';

interface IProps {
  visible: boolean;
  setVisible: (visible: boolean) => void;
}

const url = 'http://localhost:5174/62MLA030_web.pdf';

const PDFReader = (props: IProps) => {
  const { visible, setVisible } = props;
  const [fileUrl, setFileUrl] = useState<string>();

  useEffect(() => {
    const getData = async () => {
      const original = await fetch(url).then(res => res.arrayBuffer());

      const pdf = await PDFDocument.load(original);

      pdf.registerFontkit(fontkit);

      const fontBytes = await fetch(font).then(res => res.arrayBuffer());
      const customFont = await pdf.embedFont(fontBytes);

      const pages = pdf.getPages();

      const { width, height } = pages[0].getSize();

      const xSegments = 200;
      const ySegments = 300;

      const rows = Math.ceil(height / ySegments) + 1;
      const cols = Math.ceil(width / xSegments) + 1;

      pages.forEach(item => {
        for (let i = 0; i < rows; i++) {
          for (let j = 0; j < cols; j++) {
            item.drawText('刘亦菲', {
              // 出现的 x 轴坐标
              x: j * xSegments,
              // 出现的 y 轴坐标
              y: i * ySegments + 100,
              // 字体大小
              size: 15,
              // 字体
              font: customFont,
              // font: customFont, // 用自己注入的字体
              // 颜色
              color: rgb(0, 0, 0),
              // 倾斜角度
              rotate: degrees(45),
              // 透明度
              opacity: 0.5,
            });
            item.drawText('2020-12-23', {
              // 出现的 x 轴坐标
              x: j * xSegments,
              // 出现的 y 轴坐标
              y: i * ySegments + 70,
              // 字体大小
              size: 15,
              // 字体
              font: customFont,
              // font: customFont, // 用自己注入的字体
              // 颜色
              color: rgb(0, 0, 0),
              // 倾斜角度
              rotate: degrees(45),
              // 透明度
              opacity: 0.5,
            });
          }
        }
      });
      // 已经处理好的数据
      const pdfBuffer = await pdf.save();

      const blob = new Blob([pdfBuffer], { type: 'application/octet-binary' });

      const file = URL.createObjectURL(blob);

      setFileUrl(`/web/viewer.html?file=${encodeURIComponent(file)}`);
    };
    getData();
  }, []);

  const handleOk = () => {
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <Modal
      width={1000}
      title="预览"
      open={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      footer={[
        <Button key="back" onClick={handleCancel}>
          关闭
        </Button>,
      ]}
    >
      <div className="container">
        <iframe title="预览文档" className="content" src={fileUrl}></iframe>
      </div>
    </Modal>
  );
};

export default PDFReader;
